<script setup lang="ts">
import { CSSProperties } from 'vue'

const props = defineProps<{
  label: Label,
  type: 'primary' | 'deleteable',
  style?: CSSProperties
}>()

const emit = defineEmits(['click', 'delete'])

const handleClick = () => {
  if (props.type === 'primary') {
    emit('click')
  }
}

const handleDelete = () => {
  if (props.type === 'deleteable') {
    emit('delete')
  }
}
</script>

<template>
  <view class="label-wrapper" :style="{ border: `1px solid ${label.color}`, ...style }" @click.stop="handleClick">
    <view class="label" :style="{ color: label.color }">{{ label.name }}</view>

    <view class="delete-icon" v-if="type === 'deleteable'" @click.stop="handleDelete">
      <image src="../static/icons/delete-small.png" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.label-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6rpx 15rpx;
  border-radius: 50rpx;
  width: fit-content;
  white-space: nowrap;
  margin: 10rpx 0;

  .delete-icon {
    width: 32rpx;
    height: 32rpx;
    margin-left: 10rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
